<template>
  <div :class="modalClass" @click="hide" id="modal-box">
    <div  id="content" @click.stop="">
      <p class="title" v-if="agTitle">{{agTitle}}</p>
      <ul>
        <li>
          <span class="left">转让算力</span>
          <span class="right">{{data.power}}T</span>
        </li>
        <li>
          <span class="left">转让单价</span>
          <span class="right">{{data.price}}{{data.machinePriceUnit}}/T</span>
        </li>
        <li>
          <span class="left">转让总额</span>
          <span class="right">{{data.totalTransferMoney}}{{data.machinePriceUnit}}</span>
        </li>
        <li v-if="data.is_have_poundage >0">
          <span class="left">转让手续费 <span v-if="data.is_have_poundage >0">{{data.rate}}</span></span>
          <span class="right">{{data.poundageCny}}CNY = {{data.poundage}}{{data.poundageType}}</span>
        </li>
        <li>
          <span class="left">预计可得</span>
          <span class="right colorYellow">
            {{data.canGet}}
            <span v-if="data.is_have_poundage >0">- {{data.poundage}}{{data.poundageType}}</span>
          </span>
        </li>
      </ul>
      <p class="reminderInfo" v-html="data.reminderInfo" v-if="data.reminderInfo"></p>
      <div class="setting">
        <button class="cancel" @click.stop="hide">取消</button>
        <button class="sure" @click.stop="callback">确定</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "AgreementDialog",
    data() {
      return {
        introduce: '协议弹窗',
        text: '',
        textb: '已阅读',
        modalClass: 'modal-hide',
        agTitle: '支付后信息无法修改，请确认一下信息',
        data : {},//信息
      }
    },
    methods: {
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      getData(data){
        this.data = data;
      },
      callback() {
        this.$emit('confirm');
        this.close();
      },
      close() {
        let thiz = this;
        thiz.hide();
      }
    }
  }
</script>
<style type="text/less" lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/animate.css";
  #modal-box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;padding-top: 0;padding-bottom: 0;
  }
  #content{
    width: 458px;margin-top: -190px;margin-left: -229px;left: 50%;top: 50%;padding: 38px;padding-bottom: 26px;
    overflow:hidden;.borderRadius;position: absolute;background: #fff;
    >.title{
      text-align: center;font-size: 22px;
    }
    >ul{
      >li{
        overflow: hidden;padding-top: 18px;
        &:first-child{
          padding-top: 28px;
        }
        >.left{
          color: #9A9A9A;font-size: 16px;float: left;
        }
        >.right{
          color: #262626;font-size: 16px;float: right;
          &.colorYellow{
            .colorYellow;
          }
        }
      }
    }
    >.reminderInfo{
      font-size: 14px;line-height: 175%;text-align: left;background: #f8f8f8;padding: 10px 15px;margin-top: 20px;.borderRadius;color: #585858;
    }
    >.setting{
      text-align: center;width:100%;background: #fff;overflow: hidden;padding-top: 20px;
      .sure{
        .submit();margin: 0;font-size: 16px;padding:0px 31px;display: inline-block;line-height: 38px;
        .borderRadius;height: 38px;box-sizing: border-box;border: 1px solid#FFD203;margin-left: 12px;width: 160px;
      }
      .cancel{
        margin: 0;font-size: 16px;padding:0px 31px;display: inline-block;line-height: 35px;
        .borderRadius;height: 38px;box-sizing: border-box;
        background: #fff;color: #636363;border: 1px solid#E5E5E5;margin-right: 15px;width: 160px;}
    }
  }
</style>
